<template>
  <div>
    <div class="banner" @click="showImgs=true">
      <img v-if="hotData.imgsList" :src="hotData.imgsList[0]" :alt="hotData.title">
      <div class="imgs-num" v-if="hotData.imgsList">{{ hotData.imgsList.length }}</div>
      <p class="title">{{ hotData.title }}</p>
    </div>
    <!--组图-->
    <div class="imgs" @click="showImgs=false" v-show="showImgs">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item,idx) of hotData.imgsList" :key="idx">
          <img :src="item" alt="Banner">
          <!--<img src="http://img1.qunarzz.com/sight/p0/1904/c2/c26e1e4ffe899843a3.water.jpg_r_800x800_67a1106e.jpg" alt="">-->
        </swiper-slide>
        <!--分页器-->
      <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>

    </div>
  </div>
</template>

<script>
export default {
  props: ['hotData'],
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        },
        loop: true
      },
      showImgs: false
    }
  }
}
</script>

<style scoped lang="stylus">
.banner
  width: 100%
  height: 0
  background-color: #eee
  padding-bottom: 55%
  position: absolute
  color: #fff
  img
    width: 100%
    height: 4.12rem
  .imgs-num
    font-size: .24rem
    position: absolute
    bottom: 1rem
    left: .5rem
  .title
    font-size: .36rem
    position: absolute
    bottom: .5rem
    left: .4rem
.imgs
  width: 100%
  position: absolute
  top: 0
  bottom: 0
  background-color: #000
  img
    width: 100%
    margin-top: 210px
  .swiper-pagination{
    bottom: 10px;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: .28rem;
  }
</style>
